import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import sass from 'sass'
import AutoImport from 'unplugin-auto-import/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { ConfigEnv, defineConfig, loadEnv, UserConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { resolve } from 'path'
import { dependencies, devDependencies, engines, name, version } from './package.json'
import { visualizer } from 'rollup-plugin-visualizer'
/** @see  https://devtools-next.vuejs.org  */
import ElementPlus from 'unplugin-element-plus/vite'
/** 平台的名称、版本、运行所需的`node`版本、依赖、构建时间的类型提示 */
const __APP_INFO__ = {
  pkg: { name, version, engines, dependencies, devDependencies },
  buildTimestamp: Date.now(),
}

const pathSrc = resolve(__dirname, 'src')
const publicSrc = resolve(__dirname, '../../../../public')
/**  Vite配置 @see https://cn.vitejs.dev/config */
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: (tag) => tag === 'font', // 将 <font> 视为自定义元素
          },
        },
      }),
      // jsx、tsx语法支持
      vueJsx(),
      /** 自动导入配置  @see https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts */
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', '@vueuse/core', 'pinia', 'vue-router', 'vue-i18n'],
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver({
            importStyle: 'sass',
          }),
          // 自动导入图标组件
          IconsResolver({}),
        ],
        // 是否在 vue 模板中自动导入
        vueTemplate: true,
        // 指定自动导入函数TS类型声明文件路径 (false:关闭自动生成)
        dts: 'src/types/auto-imports.d.ts',
      }),
      Components({
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver({
            importStyle: 'sass',
          }),
          // 自动注册图标组件
          IconsResolver({
            // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
            enabledCollections: ['ep'],
          }),
        ],
        // 指定自定义组件位置(默认:src/components)
        dirs: ['src/components', 'src/**/components'],
        // 指定自动导入组件TS类型声明文件路径 (false:关闭自动生成)
        dts: 'src/types/components.d.ts',
      }),
      ElementPlus({
        useSource: true,
      }),
      Icons({
        // 自动安装图标库
        autoInstall: true,
      }),
      // createSvgIconsPlugin({
      //   // 指定需要缓存的图标文件夹
      //   iconDirs: [resolve(pathSrc, 'assets/icons')],
      //   // 指定symbolId格式
      //   symbolId: 'icon-[dir]-[name]',
      // }),
      visualizer(),
    ],
    // publicDir: publicSrc,
    resolve: {
      alias: {
        '@': pathSrc,
      },
    },
    css: {
      // CSS 预处理器
      preprocessorOptions: {
        // 定义全局 SCSS 变量
        scss: {
          api: 'modern-compiler',
          implementation: sass,
          javascriptEnabled: true,
          additionalData: `
            @use "@/styles/variables.scss" as *;
          `,
        },
      },
    },
    server: {
      // 允许IP访问
      host: '0.0.0.0',
      // 应用端口 (默认:3000)
      port: Number(env.VITE_APP_PORT),
      // 运行是否自动打开浏览器
      open: false,
      proxy: {
        '/voice': {
          target: 'http://192.168.31.146:3001',
          changeOrigin: true,
        },
      },
    },
    // 构建配置
    build: {
      emptyOutDir: true, // 构建前清空文件夹
      target: 'es2015', // 浏览器兼容目标
      rollupOptions: {
        output: {
          // entryFileNames: 'entryFileNames.js',
          // chunkFileNames: 'content.js',
          // assetFileNames: 'assets/[ext]/[name].[hash].[ext]',
          // format: 'es', // 确保输出为 ES 模块
          // 将所有代码打包到单个 JS 文件
          inlineDynamicImports: true, // 关键配置：内联动态导入
          entryFileNames: 'inject.js', // 主入口文件名
          assetFileNames: '[name].[ext]', // 静态资源文件名格式（可选）
        },
      },
    },
    define: {
      __APP_INFO__: JSON.stringify(__APP_INFO__),
    },
  }
})
